<template>
	<view class="container">
		<view class="title">时间设置 TIMESETTING</view>
        <picker-view v-if="visible" :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view">
            <picker-view-column>
                <view class="item" v-for="(item,index) in hours" :key="index">{{item}}小时(h)</view>
            </picker-view-column>
            <picker-view-column>
                <view class="item" v-for="(item,index) in minutes" :key="index">{{item}}分钟(min)</view>
            </picker-view-column>
            <picker-view-column>
                <view class="item" v-for="(item,index) in seconds" :key="index">{{item}}秒(s)</view>
            </picker-view-column>
        </picker-view>
		<button class="setup-btn" @tap="handleSetup">设定 SETUP</button>
    </view>
</template>
<script>
    export default {
        data: function () {
            const date = new Date()
            const years = []
            const year = date.getFullYear()
            const months = []
            const month = date.getMonth() + 1
            const days = []
            const day = date.getDate()
            for (let i = 1990; i <= date.getFullYear(); i++) {
                years.push(i)
            }
            for (let i = 1; i <= 12; i++) {
                months.push(i)
            }
            for (let i = 1; i <= 31; i++) {
                days.push(i)
            }
            return {
                title: 'picker-view',
                years,
                year,
                months,
                month,
                days,
                day,
                value: [9999, month - 1, day - 1],
                visible: true,
                indicatorStyle: `height: 50px;`,
				hours: Array.from({length: 24}, (_, i) => i),
				minutes: Array.from({length: 60}, (_, i) => i),
				seconds: Array.from({length: 60}, (_, i) => i)
            }
        },
        methods: {
            bindChange: function (e) {
                const val = e.detail.value
                this.year = this.years[val[0]]
                this.month = this.months[val[1]]
                this.day = this.days[val[2]]
            }
        }
    }
</script>
<style>
	.container {width: 100%;height: calc(100vh - 60rpx);background: white;display: flex;flex-direction: column;align-items: center;overflow: hidden;}
	.title {font-size: 36rpx;font-weight: bold;color: #333;padding: 40rpx 20rpx;}
	.picker-view {
		width: 750rpx;
		height: 600rpx;
		margin-top: 20rpx;
	}
	.item {
		line-height: 100rpx;
		text-align: center;
		color: #7C643C;
	}
	.setup-btn {
	    width: 600rpx;
	    height: 80rpx;
		line-height: 80rpx;
	    background-color: #7C643C;
	    color: white;
	    border: none;
	    border-radius: 16rpx;
	    font-size: 32rpx;
	    font-weight: bold;
	    margin-top: 40rpx;
	}
	
	.setup-btn:active {
	    opacity: 0.9;
	}
</style>

